<template>
  <div class="main">
    <Top></Top>
    <div class="main_center">
      <div class="main_top">
        <div class="menu_top">
          <div class="menu_tab">
          <div class="tab_list">

            <div class="tab_item menu_title"  :style="{background:selectTab===1?'#116DEE':'#fff',color:selectTab===1?'#fff':'#2A2A2A'}" @click="checkTab(1,'Status')">
              <img :src="selectTab===1?Home:HomeBack">
              <span>运行状态</span>
              
            </div>
            <!-- <div class="tab_item menu_title"  :style="{background:selectTab===1?'#116DEE':'#fff',color:selectTab===1?'#fff':'#2A2A2A'}" >
              <img :src="selectTab===1?Home:HomeBack">
              <span @click="minitest">mini-test</span>
            </div> -->

            <div class="tab_item" id="productionData" :style="{background:selectTab===2?'#116DEE':'#fff',color:selectTab===2?'#fff':'#2A2A2A'}" @click="checkTab(2,'Product')">生产数据</div>
            <div class="tab_item" id="qualityAnalysis" :style="{background:selectTab===3?'#116DEE':'#fff',color:selectTab===3?'#fff':'#2A2A2A'}" @click="checkTab(3,'Quality')">质量分析</div>
            <div class="tab_item" id="equipmentManagement" :style="{background:selectTab===4?'#116DEE':'#fff',color:selectTab===4?'#fff':'#2A2A2A'}" @click="checkTab(4,'Machine')">设备管理</div>
            <div class="tab_item" id="userConfiguration" :style="{background:selectTab===5?'#116DEE':'#fff',color:selectTab===5?'#fff':'#2A2A2A'}" @click="checkTab(5,'User')">用户配置</div>
          </div>
        </div>
        </div>

      </div>
      <component :is="comName" class="tab-class" />
    </div>
    <Bottom></Bottom>
  </div>
  

</template>

<script>
import qwebchannel from '../qt5.15webchannel';
import home from '../assets/ic_homepage_home_select.png'
import homeBack from '../assets/ic_homepage_home.png'
import Top from './components/top'
import Bottom from './components/bottom'
import Product from './product/index.vue'
import Machine from './machine/index.vue'
import Quality from './quality/index.vue'
import Status from './status/index.vue'
import User from './user/index.vue'
	export default {
		name: 'userInfoReg',
		components: {
      Top,
      Bottom,
      Product,
      Machine,
      Quality,
      Status,
      User
		},
		data() {
			return {
        selectTab: 1,
        comName: 'status',
        Home: home,
        HomeBack:homeBack,
        beforeUnload: '',
        Handler: '',
        qtCall:null
			}
		},
    created() {

    },
  mounted(){
    var qtCall
    // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
    //   this.qtCall = channel.objects.webBridge;
    //   this.qtCall.QtToJs.connect((func, json) => {
    //     console.log('main-connect-value', json)
        
    //     })
    //     //qtCall.msgToQt("ooo");
      
    // });
    
  },

//   mounted() {
//     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
//     window.addEventListener('unload', e => this.unloadHandler(e))
// 	},
//   beforeDestroy() {
//     window.addEventListener('beforeunload', function (e) {
//     // 兼容不同浏览器的提示方式
//       this.window.alert(1111)
//       var confirmationMessage = '您确定要离开吗？';
//       e.returnValue = confirmationMessage;  // Gecko, Trident, Chrome 34+
//       return confirmationMessage;           // Gecko, WebKit, Chrome <34
//     });
// },
    methods: {
      checkTab(index,val){
        this.selectTab = index
        this.comName = val
      },
      minitest(){
        this.qtCall.JsToQt('NeedOperate',{'type':8})
      }
  },

	}
</script>
<style scoped lang="less">

.main{
  display: flex;
  flex-direction: column;
  height: 100%;
  .main_center{
    display: flex;
    width: 100%;
    height: calc(100% - 100px);
    background-color: #ECEEF1;
    flex-direction: column;
    .main_top{
      display: flex;
      width: 100%;
      background-color: #fff;
      border-bottom: 2px solid #ECEEF1;
      .menu_tab{
        display: flex;
        background-color: #fff;
        border-bottom: 2px solid #ECEEF1;
        height: 68px;
        .tab_list{
          flex: 1;
          display: flex;
          .tab_item{
            width: 150px;
            text-align: center;
            line-height: 68px;
            font-weight: 600;
            font-size: 20px;
            cursor: pointer;
          }
        }
      }
      .menu_top{
        width: 100%;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 20px;
        color: #2A2A2A;
        height: 68px;
        border-bottom: 2px solid #ECEEF1;
        .menu_title{
          display: flex;
          align-items: center;
          text-indent: 10px;
          img{
            width: 20px;
            height: 20px;
            padding-left: 10px;
          }
          
        }
      }

    }

  }

}
</style>
